<template>
  <div class="main-sidebar" :class="{ 'to-left' : isHideSideBar }">
    <div class="navbar-collapse">
      <ul class="nav" :class="{isSynchronize : isSynchronize}" v-cloak>
        <li v-for="(item, index) in subMenu.list" :key="index" :class="activeTabIndex !== -1 && first.nowIndex === first.activeIndex && index === activeSub ? 'active' : ''">
          <a :data-url="item.url" :data-id="item.id" :id="item.id" :class="item.childList ? '' : 'toggle-menu'" v-bind:data-single="item.childList ? 0 : 1" @click.prevent="item.childList && item.childList.length > 0 ? clickToggleMenu(index) : clickOneMenu(index,item,$event)">{{item.name}}<i class="ion-chevron-right" :class="expand.index == index && expand.isExpand ? 'down' : 'right'" aria-hidden="true" v-if="item.childList && item.childList.length > 0"></i></a>
          <transition name="slide"
            v-on:enter="enter"
            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
          >
            <ul class="nav nav-second-level" v-bind:data-index="index" v-if="item.childList && item.childList.length > 0" v-show="expand.index == index && expand.isExpand" style="height: auto">
              <li v-for="(sub_item, idx) in item.childList" :key="idx" :class="activeTabIndex !== -1 && first.nowIndex === first.activeIndex && index === activeThirdObj.second && idx === activeThirdObj.third ? 'active' : ''"><a :data-url="item.url" class="toggle-menu" :data-id="sub_item.id" :id="sub_item.id" @click.prevent="clickOneMenu(idx,sub_item,$event)">{{sub_item.name}}</a></li>
            </ul>
          </transition>
        </li>
      </ul>
    </div>
    <div class="switch-box">
      <span class="switch-toolbar" :class="{ 'to-left' : isHideSideBar }" @click="toggleSideBar"></span>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import common from "../mixins/common.js";
import pushRouter from "../mixins/router/pushRouter.js";
import { deepCopyObj } from "../assets/js/help.js";
export default {
  mixins: [common, pushRouter],
  data() {
    return {
      initSub: 0,
      first: {
        nowIndex: 0,
        activeIndex: 0
      },
      activeSub: -1,
      activeThirdObj: {
        second: -1,
        third: -1
      },
      expand: {
        index: -1,
        isExpand: false
      }
    };
  },
  computed: {
    ...mapGetters({
      isHideSideBar: "getIsHideSideBar"
    }),
    activeTabIndex: function() {
      let _active = this.$store.state.tab.active;
      return _active;
    },
    isSynchronize: function() {
      let _isSynchronize = this.$store.state.tab.isSynchronize;
      return _isSynchronize;
    },
    tabLists: function() {
      return this.$store.state.tab.list;
    },
    subMenu() {
      let subMenu = this.$store.state.sideMenu;
      this.first.nowIndex = subMenu.firstIndex;
      this.expand.isExpand = false;
      this.initSub++;
      return subMenu;
    }
  },
  watch: {
    activeTabIndex: function(val, oldVal) {
      let _active = val;
      if (this.$store.state.allMenu.list.length > 0) {
        this.synchronizeMenu(_active);
      }
    },
    isSynchronize: function(val) {
      let _active = this.$store.state.tab.active;
      if (this.$store.state.allMenu.list.length > 0) {
        this.synchronizeMenu(_active);
      }
    }
    // initSub: function (val) {
    //   if(val == 1) {
    //     setTimeout(function(){
    //       this.setInitTab(this.$store.state.sideMenu.list);
    //     }.bind(this), 1000);
    //   }
    // }
  },
  created() {
    this.first.nowIndex = this.subMenu.firstIndex;
  },
  mounted() {
    let _tabList = this.tabLists;
    if (_tabList.length > 0) {
      let _first = _tabList[0].tag[0];
      let _sec = _tabList[0].tag[1];
      let _third = _tabList[0].tag[2];
      this.activeSub = _sec;
      this.first.nowIndex = _first;
      this.first.activeIndex = _first;
      if (_third > -1) {
        this.activeThirdObj.second = _sec;
        this.activeThirdObj.third = _third;
        this.expand.index = _sec;
        setTimeout(
          function() {
            this.expand.isExpand = true;
          }.bind(this),
          300
        );
      }
    }
    this.first.nowIndex = this.subMenu.firstIndex;

    // this.setInitTab();
  },
  methods: {
    ...mapMutations(["SET_FUNCTIONLIST"]),
    setInitTab(_subList) {
      if (_subList.length > 0 && this.tabLists.length < 1) {
        let isSingle =
          _subList.childList && _subList.childList.length > 0 ? false : true;
        let menuInfo = isSingle ? _subList[0] : _subList.childList[0];
        let url = menuInfo.url;
        let _activeSub = 0;
        let _second = isSingle ? -1 : 0;
        let _third = isSingle ? -1 : 0;
        let _isExpand = isSingle ? false : true;
        let tag_third = isSingle ? -1 : 0;
        let thisTab = {
          id: menuInfo.id,
          name: menuInfo.name,
          url: url,
          functionList: menuInfo.functionList,
          tag: [0, 0, tag_third]
        };

        this.setSelectMenu(
          _activeSub,
          _second,
          _third,
          _isExpand,
          url,
          thisTab
        );
      }
    },
    //点击侧边栏切换收缩状态
    clickToggleMenu(index) {
      if (index == this.expand.index) {
        this.expand.isExpand = !this.expand.isExpand;
      } else {
        this.expand.index = index;
        this.expand.isExpand = true;
      }
    },
    //设置选中的菜单的状态
    setSelectMenu(activeSub, second, third, isExpand, url, thisTab) {
      let self = this;
      this.activeSub = activeSub;
      this.expand.isExpand = isExpand;
      this.activeThirdObj.second = second;
      this.activeThirdObj.third = third;

      // let url
      let tabList = this.tabLists;
      let thisTag = thisTab.tag.toString();
      let isExist = false;
      let existIndex = -1;
      for (let i = 0, len = tabList.length; i < len; i++) {
        let _tag = tabList[i].tag.toString();
        if (_tag == thisTag) {
          isExist = true;
          existIndex = i;
          break;
        }
      }
      if (isExist) {
        this.$store.commit("SET_TABLIST", { active: existIndex });
      } else {
        // this.activeTabIndex = 0;
        this.$store.commit("SET_TABLIST", { active: 0 });
        this.tabLists.unshift(thisTab);
        this.$store.commit("SET_TABLIST", { active: 0, list: this.tabLists });
      }

      this.pushRouterTo(url);
    },
    //点击某一个菜单栏，打开一个新的页面或者重新显示对应的页面
    clickOneMenu(index, menuInfo, e) {
      // console.log("index, menuInfo, e", index, menuInfo, e);
      let _this = this;
      let $Target = $(e.target);
      let isSingle = Number($Target.data("single"));
      let thisTab = {};
      let tag_second = -1;
      let tag_third = -1;
      let url = menuInfo.url;
      let _activeSub = -1;
      let _second = -1;
      let _third = -1;
      let _isExpand = -1;

      this.first.activeIndex = this.first.nowIndex;
      if (!isNaN(isSingle)) {
        //当前点击的是二级菜单
        _activeSub = index;
        _isExpand = false;
        _second = -1;
        _third = -1;
        tag_second = index;
      } else {
        //当前点击的是三级菜单
        _second = Number($Target.closest(".nav-second-level").data("index"));
        _third = index;
        _activeSub = _second;
        _isExpand = true;

        tag_second = _second;
        tag_third = index;
      }

      thisTab = {
        id: menuInfo.id,
        name: menuInfo.name,
        url: menuInfo.url,
        functionList: menuInfo.functionList,
        tag: [this.first.nowIndex, tag_second, tag_third]
      };

      this.setSelectMenu(_activeSub, _second, _third, _isExpand, url, thisTab);
    },
    synchronizeMenu(_active) {
      let _tag =
        this.tabLists.length > 0 ? this.tabLists[_active].tag : [0, -1, -1];
      let sideMenu = {
        list: this.$store.state.allMenu.list[_tag[0]].childList,
        firstIndex: _tag[0]
      };
      this.first.activeIndex = _tag[0];
      this.first.nowIndex = _tag[0];
      this.activeSub = _tag[1];
      this.activeThirdObj.second = _tag[1];
      this.activeThirdObj.third = _tag[2];
      this.expand.index = _tag[1];
      if (_tag[2] > -1) {
        this.expand.isExpand = true;
      } else {
        this.expand.isExpand = false;
      }

      this.$store.commit("SET_ALLMENU", { active: _tag[0] });
      this.$store.commit("SET_SIDEMENULIST", sideMenu);
    },
    //切换侧边栏的显示状态
    toggleSideBar() {
      this.$store.commit("SIDEBAR_TOGGLE");
    },
    enter(el) {
      let height = $(el).find("li").length * 40;
      $(el).height(height);
    },
    beforeLeave(el) {
      let height = $(el).find("li").length * 40;
      $(el).height(height);
    },
    leave(el) {
      $(el).height(0);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../assets/less/sidebar.less";
.slide-enter {
  height: 0;
}
</style>
